<template>
  <div style="padding-top: 5px;">
    <div class="top-grid">
      <div class="item">
        <div class="card card1 flex align-center">
          <img src="@/assets/images/dashboard/card-icon1.png" class="icon">
          <div class="f1">
            <div class="flex align-center">
              <div class="brand">智能剪辑</div>
              <img
                src="@/assets/images/dashboard/right-arrow.png"
                class="arrow"
              >
            </div>
            <div class="sub">可视化，多场景高自由度剪辑</div>
            <div class="flex align-center">
              <img src="@/assets/images/dashboard/up.png" class="up">
              <div class="flex align-center text">已创作 <span>0</span> 条</div>
            </div>
          </div>
        </div>
        <div class="card-sm flex align-center">
          <img src="@/assets/images/dashboard/card-icon4.png" class="icon">
          <div class="f1 info-sm">
            <div class="flex-b align-center">
              <div class="brand">图文剪辑</div>
            </div>
            <div class="sub">一键生成多款爆款图文</div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="card card2 flex align-center">
          <img src="@/assets/images/dashboard/s3.png" class="icon">
          <div class="f1">
            <div class="flex align-center">
              <div class="brand">脚本剪辑</div>
              <img
                src="@/assets/images/dashboard/right-arrow.png"
                class="arrow"
              >
            </div>
            <div class="sub">更高效，仅需一步批量出片</div>
            <div class="flex align-center">
              <img src="@/assets/images/dashboard/up.png" class="up">
              <div class="flex align-center text">已创作 <span>0</span> 条</div>
            </div>
          </div>
        </div>
        <div class="card-sm flex align-center">
          <img src="@/assets/images/dashboard/card-icon5.png" class="icon">
          <div class="f1 info-sm">
            <div class="flex-b align-center">
              <div class="brand">AI智能文案</div>
            </div>
            <div class="sub">一键生成爆款文案脚本标题</div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="card card3 flex align-center">
          <img src="@/assets/images/dashboard/card-icon3.png" class="icon">
          <div class="f1">
            <div class="flex align-center">
              <div class="brand">爆款剪辑</div>
              <img
                src="@/assets/images/dashboard/right-arrow.png"
                class="arrow"
              >
            </div>
            <div class="sub">更简单，多款爆款模板使用</div>
            <div class="flex align-center">
              <img src="@/assets/images/dashboard/up.png" class="up">
              <div class="flex align-center text">已创作 <span>0</span> 条</div>
            </div>
          </div>
        </div>
        <div class="card-sm flex align-center">
          <img src="@/assets/images/dashboard/card-icon6.png" class="icon">
          <div class="f1 info-sm">
            <div class="flex-b align-center">
              <div class="brand">视频智能拆分</div>
            </div>
            <div class="sub">爆款优质视频拆分替换</div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="corp-info-outer rel">
          <div class="corp-name flex align-center nowrap">
            欢迎回来，济宁矩阵网络科技有限公司
          </div>
          <div class="abs corp-info-inner">
            <div class="flex align-center">
              <img
                src="@/assets/images/dashboard/corp.png"
                alt=""
                class="img"
              >
              <div style="width: calc(100% - 100px)">
                <div class="name">济宁矩阵网络科技有限公司</div>
                <div class="date">有效期:2025/3/21</div>
                <div class="flex align-center tag-list">
                  <div
                    class="tag-item flex-c align-center"
                    style="background-color: rgba(255, 128, 0, 1)"
                  >
                    企业用户
                  </div>
                  <div
                    class="tag-item flex-c align-center"
                    style="background-color: rgba(0, 186, 173, 1)"
                  >
                    已实名
                  </div>
                  <div
                    class="tag-item flex-c align-center"
                    style="background-color: rgba(0, 119, 255, 1)"
                  >
                    主账号
                  </div>
                  <div class="tag-item flex-c align-center blue-purple">
                    尝鲜版
                  </div>
                </div>
              </div>
            </div>
            <div class="divider" />
            <div class="value-list flex-b align-center">
              <div class="value-item flex-c flex-v align-center">
                <div class="value">368410</div>
                <div class="sub">可用剪辑条数</div>
              </div>
              <div class="value-item flex-c flex-v align-center">
                <div class="value">7560</div>
                <div class="sub">已用剪辑条数</div>
              </div>
              <div class="value-item flex-c flex-v align-center">
                <div class="value">500</div>
                <div class="sub">员工后台</div>
              </div>
              <div class="value-item flex-c flex-v align-center">
                <div class="value">500G</div>
                <div class="sub">剩余空间</div>
              </div>
            </div>
            <div class="btn-list flex-c align-center">
              <el-button class="btn" size="mini">充值续费</el-button>
              <el-button
                class="btn btn-primary"
                type="primary"
                size="mini"
              >团队管理</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btm-grid">
      <div class="left-box">
        <div class="grid-2">
          <div class="g-card">
            <div class="flex-b align-center" style="margin-bottom: 16px">
              <div class="card-brand">进度管理</div>
              <TagList :list="tagList1" />
            </div>
            <div class="card-content flex-c flex-v align-center">
              <el-empty
                v-if="!list1.length"
                :image-size="100"
                description="暂无数据"
              />
              <div v-else class="plain-table w-100 f1">
                <div class="thead col-3">
                  <div class="th">任务名</div>
                  <div class="th">创建时间</div>
                  <div class="th">任务状态</div>
                </div>
                <div class="tbody scroll-box">
                  <div
                    v-for="(item, index) in list1"
                    :key="index"
                    class="tr col-3"
                  >
                    <div class="td">{{ item.col1 }}</div>
                    <div class="td">{{ item.col2 }}</div>
                    <div class="td">
                      <span
                        class="circle"
                        :class="{
                          green: item.col3 === '运行中',
                          blue: item.col3 === '已完成',
                          red: item.col3 === '已失败',
                        }"
                      />
                      {{ item.col3 }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="g-card">
            <div class="flex-b align-center" style="margin-bottom: 16px">
              <div class="card-brand flex align-center">客资管理</div>
              <TagList :list="tagList2" />
            </div>
            <div class="card-content flex-c flex-v align-center">
              <el-empty
                v-if="!list2.length"
                :image-size="100"
                description="暂无数据"
              />
              <div v-else class="plain-table f1">
                <div class="thead col-3">
                  <div class="th">任务名</div>
                  <div class="th">创建时间</div>
                  <div class="th">任务状态</div>
                </div>
                <div class="tbody scroll-box">
                  <div
                    v-for="(item, index) in list2"
                    :key="index"
                    class="tr col-3"
                  >
                    <div class="td">{{ item.col1 }}</div>
                    <div class="td">{{ item.col2 }}</div>
                    <div class="td">
                      <span
                        class="circle"
                        :class="{
                          green: item.col3 === '运行中',
                          blue: item.col3 === '已完成',
                          red: item.col3 === '已失败',
                        }"
                      />
                      {{ item.col3 }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="corp-info-outer rel business-box">
          <div class="corp-name flex-b align-center">
            企业商家成长中心
            <span class="flex-e align-center pointer">查看更多 ></span>
          </div>
          <div class="abs corp-info-inner">
            <div class="grid-4">
              <div
                v-for="item in 4"
                :key="item"
                class="flex-c flex-v align-center"
              >
                <img
                  src="@/assets/images/dashboard/business.png"
                  alt=""
                  class="full-img pointer"
                >
                <div class="name">新手客户入门必学指南</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="ad-box">
          <img src="@/assets/images/dashboard/ad.png" alt="" class="ad">
        </div>
        <div class="chart-box">
          <div class="g-card">
            <div class="flex-b align-center" style="margin-bottom: 16px">
              <div class="chart-brand">每日数据统计</div>
              <TagList :list="tagList3" />
            </div>
            <div id="chart" class="chart-container" />
          </div>
        </div>
      </div>
    </div>
    <div class="footer flex-c align-center">
      Copyright © 2024 矩阵猫丨璟暮科技
      丨鲁ICP备2021036948号-1丨鲁公网安备37089702000359号
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'
import TagList from '@/components/TagList'
import { getCategoryList } from '@/api/dashboard.js'
export default {
  name: 'Dashboard',
  components: { TagList },
  mixins: [resize],
  data() {
    return {
      tagList1: [{ name: '发布任务' }, { name: '剪辑任务' }],
      tagList2: [{ name: '评论' }, { name: '私信' }],
      tagList3: [{ name: '播放量' }, { name: '账号数' }],
      list1: [
        { col1: '32220号发布', col2: '2024.04.22', col3: '运行中' },
        { col1: '32220号发布', col2: '2024.04.22', col3: '已完成' },
        { col1: '32220号发布', col2: '2024.04.22', col3: '已失败' },
        { col1: '32220号发布', col2: '2024.04.22', col3: '运行中' },
        { col1: '32220号发布', col2: '2024.04.22', col3: '运行中' },
        { col1: '32220号发布', col2: '2024.04.22', col3: '运行中' },
        { col1: '32220号发布', col2: '2024.04.22', col3: '运行中' },
        { col1: '32220号发布', col2: '2024.04.22', col3: '运行中' },
        { col1: '32220号发布', col2: '2024.04.22', col3: '运行中' }
      ],
      list2: [],
      chart: null
    }
  },
  computed: {
    theme() {
      return this.$store.state.app.theme
    }
  },
  watch: {
    theme() {
      this.initChart()
    }
  },
  mounted() {
    this.getCategoryList()
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    async getCategoryList() {
      const res = await getCategoryList()
      console.log('初始化', res)
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('chart'))
      const areaColor = [
        'rgba(53, 197, 86, 1)',
        'rgba(63, 76, 254, 1)',
        'rgba(243, 64, 64, 1)',
        'rgba(255, 195, 0, 1)',
        'rgba(121, 72, 234, 1)'
      ]
      const axisData = ['播放量', '发布量', '点赞量', '评论量', '转发量']
      const seriesData = [
        [10, 15, 22, 50, 30],
        [12, 20, 30, 40, 21],
        [13, 12, 18, 34, 33],
        [9, 18, 16, 45, 45],
        [20, 22, 12, 56, 21]
      ]
      const series = []
      axisData.forEach((item, index) => {
        series.push({
          name: item,
          type: 'line',
          smooth: true,
          showSymbol: true,
          symbol: 'circle',
          data: seriesData[index],
          itemStyle: {
            normal: {
              color: areaColor[index]
            }
          },
          lineStyle: {
            normal: {
              width: 3
            }
          }
        })
      })
      const option = {
        grid: {
          left: '5%',
          right: '1%',
          top: '20%',
          bottom: '1%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: 'rgba(255,255,255,0.7)'
            }
          },
          backgroundColor: 'rgba(255,255,255,1)',
          padding: [5, 10],
          textStyle: {
            color: '#555'
          }
        },
        legend: {
          x: '25',
          y: '10',
          icon: 'circle',
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 30,
          textStyle: {
            color: this.theme === 'dark' ? '#fff' : '#000',
            fontSize: 14,
            fontWeight: 'normal'
          },
          data: ['播放量', '发布量', '点赞量', '评论量', '转发量']
        },
        xAxis: {
          show: false,
          type: 'category',
          data: axisData,
          axisLine: {
            lineStyle: {
              color: '#2557B4'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              color: 'red'
            }
          }
        },
        yAxis: {
          show: true,
          axisLine: {
            lineStyle: {
              color: '#2557B4'
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 14,
              color: 'rgba(110, 110, 110, 1)'
            }
          }
        },
        series
      }
      this.chart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
.footer {
  height: 37px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0px;
  color: rgba(166, 166, 166, 1);
}
.tag-item {
  color: #fff !important;
}
.ad-box {
  .ad {
    width: 100%;
    opacity: 1;
    border-radius: 15px;
    height: 207px;
  }
}
.full-img{
  max-height: 170px;
}
.dark {
  .chart-brand {
    color: #fff !important;
  }
  .corp-info-inner {
    background: #1d1e1f !important;
    border: 1px solid #1d1e1f !important;
    .name {
      color: #fff !important;
    }
    .value-item {
      .value {
        color: #fff !important;
      }
      .sub {
        color: rgba(255, 255, 255, 0.7) !important;
      }
    }
    .tag-item {
      color: #fff !important;
    }
  }
}
.blue-purple {
  background: linear-gradient(
    90deg,
    rgba(121, 72, 234, 1),
    rgba(0, 186, 173, 1)
  );
}
.chart-box {
  margin-top: 25px;
  height: 494px;
  .chart-brand {
    font-size: 20px;
    font-weight: 400;
    color: rgba(57, 57, 57, 1);
  }
  .chart-container {
    height: 420px;
  }
}
.col-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.grid-4 {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.business-box {
  margin-top: 25px;
  width: 100% !important;
  height: 262px !important;
  .corp-info-inner {
    width: 100% !important;
    height: 238px !important;
    overflow: hidden;
  }
  .grid-4 {
    grid-column-gap: 25px;
    .name {
      margin-top: 18px;
      height: 14px;
      overflow: hidden;
      line-height: 1;
    }
  }
}

.btm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  margin-top: 25px;
}
.plain-table {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  .th,
  .td {
    font-size: 14px;
    font-weight: 400;
  }
  .thead,
  .tr {
    height: 37px;
    line-height: 37px;
  }
  .tr {
    border-bottom: 0.3px solid rgb(166, 166, 166);
    &:last-child {
      margin-bottom: 0;
    }
  }
  .th,
  .td {
    box-sizing: border-box;
    padding: 0 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .tbody {
    height: 290px;
    overflow-y: auto;
  }
  .circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    display: inline-block;
  }
  .green {
    background: rgba(67, 207, 124, 1);
  }
  .blue {
    background: rgba(0, 119, 255, 1);
  }
  .red {
    background: rgba(255, 0, 0, 1);
  }
}
.right-box {
  box-sizing: border-box;
}
.left-box {
  .grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 25px;
    grid-column-gap: 25px;
  }
  .g-card {
    .card-content {
      width: 100%;
      height: 348px;
      border-radius: 15px;
      border: 0.3px dashed rgba(166, 166, 166, 1);
      margin-top: 20px;
      box-sizing: border-box;
      padding: 8px 15px;
    }
    .qa {
      width: 12px;
      height: 12px;
      margin-left: 10px;
    }
    .card-icon {
      width: 12px;
      height: 12px;
    }
  }
}
.corp-info-outer {
  width: 100%;
  height: 310px;
  border-radius: 15px;
  background: linear-gradient(
    180deg,
    rgba(0, 119, 255, 1) 0%,
    rgba(104, 175, 255, 0.94) 10.97%,
    rgba(255, 255, 255, 0.85) 100%
  );
  .corp-name {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    height: 40px;
    padding-left: 30px;
    padding-right: 30px;
  }
  .corp-info-inner {
    width: 100%;
    height: 270px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 1);
    backdrop-filter: blur(4px);
    top: 40px;
    left: 0;
    z-index: 99;
    box-sizing: border-box;
    padding: 16px 20px;
    .img {
      width: 80px;
      height: 80px;
      border-radius: 15px;
      margin-right: 20px;
    }
    .name {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
    }
    .date {
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 166, 0, 1);
      margin-top: 10px;
    }
    .tag-list {
      overflow: hidden;
      width: 100%;
      .tag-item {
        flex-shrink: 0;
        margin-top: 10px;
        box-sizing: border-box;
        padding: 0 5px;
        font-size: 12px;
        font-weight: 400;
        height: 18px;
        color: rgba(0, 0, 0, 1);
        margin-right: 10px;
        border-radius: 5px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    .divider {
      width: 100%;
      height: 0.3px;
      margin-top: 24px;
      margin-bottom: 24px;
      background-color: rgba(166, 166, 166, 1);
    }
    .value-list {
      .value-item {
        .value {
          font-size: 20px;
          font-weight: 500;
          color: rgba(0, 0, 0, 1);
        }
        .sub {
          font-size: 14px;
          font-weight: 400;
          color: #666;
          margin-top: 14px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
    .btn-list {
      margin-top: 20px;
      .btn {
        width: 110px;
        height: 30px;
        opacity: 1;
        border-radius: 5px;
        background: rgba(204, 204, 204, 0);
        font-size: 14px;
        border: 1 solid rgba(166, 166, 166, 1);
      }
      .btn.btn-primary {
        background: rgba(0, 119, 255, 1);
        border: 1 solid rgba(0, 119, 255, 1);
        color: #fff;
        margin-left: 44px;
      }
    }
  }
}
.top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}
.dark {
  .card,
  .card-sm {
    border: 1px solid #1d1e1f;
    .sub,
    .text {
      color: #0f0f0f;
      span {
        color: #fff;
      }
    }
  }
}
.card {
  width: 100%;
  height: 165px;
  border-radius: 15px;
  backdrop-filter: blur(4px);
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 1);
  .icon {
    width: 120px;
    height: 120px;
  }
  .arrow {
    width: 8px;
    height: auto;
    margin-left: 14px;
  }
  .brand {
    font-size: 20px;
    font-weight: 700;
    color: rgba(15, 15, 15, 1);
  }
  &:hover {
    .icon {
      transform: scale(1.08);
    }
  }
  .sub {
    font-size: 14px;
    font-weight: 500;
    color: rgba(62, 73, 84, 1);
    margin-top: 18px;
    margin-bottom: 14px;
  }
  .up {
    width: 20px;
    height: 12px;
    margin-right: 10px;
  }
  .text {
    font-size: 14px;
    font-weight: 400;
    color: rgba(150, 155, 160, 1);
    span {
      font-size: 14px;
      font-weight: 400;
      color: rgba(63, 140, 255, 1);
      display: inline-block;
      margin-left: 5px;
      margin-right: 5px;
    }
  }
}
.card-sm {
  width: 100%;
  height: 120px;
  opacity: 1;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 1);
  padding: 0 10px;
  margin-top: 25px;
  .info-sm {
    margin-top: -20px;
  }
  .icon {
    width: 110px;
    height: 110px;
    margin-right: 25px;
  }
  .brand {
    font-size: 20px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
  }
  &:hover {
    .icon {
      transform: scale(1.08);
    }
    .brand {
      // font-weight: 500;
    }
  }
  .sub {
    font-size: 14px;
    font-weight: 400;
    color: rgba(62, 73, 84, 1);
    margin-top: 12px;
  }
}
.card1 {
  background: linear-gradient(
    180deg,
    rgba(42, 130, 228, 0.53) 0%,
    rgba(143, 190, 241, 0.7) 19.31%,
    rgba(255, 255, 255, 0.7) 100%
  );

  box-shadow: 0px 12px 23px rgba(62, 73, 84, 0.04);
}
.card2 {
  background: linear-gradient(
    180deg,
    rgba(62, 214, 204, 0.48) 0%,
    rgba(62, 202, 214, 0.57) 4.17%,
    rgba(62, 212, 214, 0.58) 19.51%,
    rgba(255, 255, 255, 0.6) 100%
  );
  box-shadow: 0px 12px 23px rgba(62, 73, 84, 0.04);
}
.card3 {
  background: linear-gradient(
    180deg,
    rgba(26, 214, 155, 0.7) 0%,
    rgba(133, 235, 193, 0.7) 24.31%,
    rgba(255, 255, 255, 0.34) 100%
  );
  box-shadow: 0px 12px 23px rgba(62, 73, 84, 0.04);
}
.dark {
  .card .brand,
  .card .sub,
  .card-sm .brand,
  .card-sm .sub,
  .card .text {
    color: rgba(255, 255, 255, 0.7);
    span {
      color: rgba(0, 119, 255, 1);
    }
  }
}
</style>
